{extend name="common:base"}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row">
        <form action="" method="post" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>角色名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$result.name}">
                    <input type="hidden" id="id" name="id" value="{$result.id}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                    拥有权限
                </label>
                <table  class="layui-table layui-input-block">
                    <tbody>
                    {volist name="parent" id="vo"}
                    <tr>
                        <td>
                            <input type="checkbox" name="permissions[]" value="{$vo.id}" lay-skin="primary" lay-filter="father" title="{$vo.name}">
                        </td>
                        <td>
                            <div class="layui-input-block">
                                {volist name="permissions" id="v"}
                                {if($v.pid == $vo.id)}
                                {if(in_array($v.id,$result.permissions))}
                                <input name="permissions[]" lay-skin="primary" type="checkbox" title="{$v.name}" value="{$v.id}" checked>
                                {else /}
                                <input name="permissions[]" lay-skin="primary" type="checkbox" title="{$v.name}" value="{$v.id}">
                                {/if}
                                {/if}
                                {/volist}
                            </div>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">
                    描述
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="desc" name="description" class="layui-textarea">{$result.description}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="edit">保存</button>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="copyright"}
{/block}
{block name="javascript"}
<script>
    layui.use(['form','layer'], function(){
        const $ = layui.jquery;
        const form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            nikename: function(value){
                if(value.length < 5){
                    return '昵称至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(edit)', function(data){
            // console.log(data);
            //发异步，把数据提交给php
            $.ajax({
                url:"{:url('edit_role')}",
                type:'POST',
                data:data.field,
                success:function (result) {
                    if(result.status === 1){
                        layer.msg(result.message, {icon: 6,time:1000}, function () {
                            xadmin.father_reload();
                        });
                    }else {
                        layer.msg(result.message,{icon:5,time:2000});
                    }
                }
            },'JSON');
            return false;
        });


        form.on('checkbox(father)', function(data){

            if(data.elem.checked){
                $(data.elem).parent().siblings('td').find('input').prop("checked", true);
                form.render();
            }else{
                $(data.elem).parent().siblings('td').find('input').prop("checked", false);
                form.render();
            }
        });


    });
</script>
{/block}